<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="referrer" content="origin" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <title>Canvas Demo: pinball</title>
	<style type="text/css">
	#box{position:fixed;top:10px;left:10px;bottom:10px;right:10px;border:1px #999 solid;}
	#point1,#point2,#point3,#point4,#movePoint{position:absolute;width:50px;height:50px;border-radius:25px;}
	#point1{background:#f20;}
	#point2{background:#999;}
	#movePoint{background:#02f;}
	#point3{background:#c20;}
	#point4{background:#920;}
	#canvas{position:absolute;left:0;top:0;background:transparent;}
	</style>
</head>
<body>
	<div id="box">
		<span id="point4"></span>
		<span id="point3"></span>
		<span id="point1"></span>
		<span id="point2"></span>
		<canvas id="canvas"></canvas>
		<span id="movePoint"></span>
	</div>
	<script type="text/javascript">
	const box = document.getElementById('box');
	const point1 = document.getElementById('point1');
	const point2 = document.getElementById('point2');
	const point3 = document.getElementById('point3');
	const point4 = document.getElementById('point4');
	const movePoint = document.getElementById('movePoint');
	const canvasElem = document.getElementById('canvas');
	const canvas = canvasElem.getContext("2d");
	var width = 0, height = 0, wsX = 0, wsY = 0;
	var p1 = {x: 0, y: 0}, p2 = {x: 0, y: 0}, p3 = {x: 0, y: 0}, p4 = {x: 0, y: 0};
	var angle = 0, angle2 = 0, radius = 0, maxRadius = 0;
	var timer = 0;
	
	document.body.onload = function() {
		width = box.clientWidth - point1.clientWidth;
		height = box.clientHeight - point1.clientHeight;
		wsX = point1.clientWidth / 2;
		wsY = point1.clientHeight / 2;
		canvasElem.width = box.clientWidth;
		canvasElem.height = box.clientHeight;
		
		p1.x = parseInt(width * Math.random());
		p1.y = parseInt(height * Math.random());
		do {
			angle = parseInt(360 * Math.random());
		} while(angle % 90 < 15);
		
		calcInit();
	};
	const P1 = {x: 0, y: 0}, P2 = {x: 0, y: 0};
	canvasElem.onmousedown = function(e) {
		P1.x = P2.x = e.offsetX;
		P1.y = P2.y = e.offsetY;
		
		if(timer) clearInterval(timer);
		
		canvas.clearRect(0, 0, box.clientWidth, box.clientHeight);

		point1.style.left = P1.x - wsX + 'px';
		point1.style.top = P1.y - wsX + 'px';
		point2.style.left = P1.x - wsX + 'px';
		point2.style.top = P1.y - wsX + 'px';
		point3.style.display = 'none';
		point4.style.display = 'none';
		movePoint.style.display = 'none';
	};
	canvasElem.onmousemove = function(e) {
		if(P1.x === 0 && P1.y === 0 && P2.x === 0 && P2.y === 0) {
			return;
		}

		P2.x = e.offsetX;
		P2.y = e.offsetY;

		canvas.clearRect(0, 0, box.clientWidth, box.clientHeight);
		canvas.beginPath();
		canvas.moveTo(P1.x, P1.y);
		canvas.lineTo(P2.x, P2.y);
		canvas.lineWidth = 1;
		canvas.strokeStyle = "#090";
		canvas.lineJoin = "miter";
		canvas.stroke();
		canvas.closePath();

		point2.style.left = P2.x - wsX + 'px';
		point2.style.top = P2.y - wsX + 'px';
	};
	canvasElem.onmouseup = function(e) {
		p1.x = P1.x - wsX;
		p1.y = P1.y - wsX;

		point3.style.display = 'inline';
		point4.style.display = 'inline';
		movePoint.style.display = 'inline';

		if(P1.x != P2.x || P1.y != P2.y) {
			angle = Math.atan((P2.y - P1.y) / (P1.x - P2.x)) * 180 / Math.PI;
			// console.log(angle);
			if(P1.x > P2.x) {
				angle += 180;
			} else if(angle < 0) {
				angle += 360;
			}
		} else {
			do {
				angle = parseInt(360 * Math.random());
			} while(angle % 90 < 15);
		}
		P1.x = P2.x = 0;
		P1.y = P2.y = 0;

		calcInit();
	};
	document.body.onresize = function() {
		this.onload();
	};
	function calcInit() {
		p3.x = p1.x;
		p3.y = p1.y;
		p4.x = p1.x;
		p4.y = p1.y;
		radius = 0;
		calcRadius();
		point3.style.left = p1.x + 'px';
		point3.style.top = p1.y + 'px';
		point4.style.left = p1.x + 'px';
		point4.style.top = p1.y + 'px';
		if(timer) clearInterval(timer);
		timer = setInterval(timerFunc, 20);
	}
	function calcRadius() {
		if(angle < 90) {
			angle2 = Math.atan(p1.y / (width-p1.x))* 180 / Math.PI;
			if(angle > angle2) {
				maxRadius = p1.y / Math.cos((90-angle) * Math.PI / 180);
				p2.x = p1.x + maxRadius * Math.cos(angle * Math.PI / 180);
				p2.y = 0;
			} else {
				maxRadius = (width-p1.x) / Math.cos(angle * Math.PI / 180);
				p2.x = width;
				p2.y = p1.y - maxRadius * Math.sin(angle * Math.PI / 180);
			}
		} else if(angle < 180) {
			angle2 = 180 - Math.atan(p1.y / p1.x)* 180 / Math.PI;
			if(angle > angle2) {
				maxRadius = p1.x / Math.cos((180-angle) * Math.PI / 180);
				p2.x = 0;
				p2.y = p1.y - maxRadius * Math.sin(angle * Math.PI / 180);
			} else {
				maxRadius = p1.y / Math.cos((angle-90) * Math.PI / 180);
				p2.x = p1.x + maxRadius * Math.cos(angle * Math.PI / 180);
				p2.y = 0;
			}
		} else if(angle < 270) {
			angle2 = 270 - Math.atan(p1.x / (height-p1.y))* 180 / Math.PI;
			if(angle > angle2) {
				maxRadius = (height-p1.y) / Math.cos((270-angle) * Math.PI / 180);
				p2.x = p1.x + maxRadius * Math.cos(angle * Math.PI / 180);
				p2.y = height;
			} else {
				maxRadius = p1.x / Math.cos((angle-180) * Math.PI / 180);
				p2.x = 0;
				p2.y = p1.y - maxRadius * Math.sin(angle * Math.PI / 180);
			}
		} else {
			angle2 = 360 - Math.atan((height-p1.y) / (width-p1.x))* 180 / Math.PI;
			if(angle > angle2) {
				maxRadius = (width-p1.x) / Math.cos((360-angle) * Math.PI / 180);
				p2.x = width;
				p2.y = p1.y - maxRadius * Math.sin(angle * Math.PI / 180);
			} else {
				maxRadius = (height-p1.y) / Math.cos((angle-270) * Math.PI / 180);
				p2.x = p1.x + maxRadius * Math.cos(angle * Math.PI / 180);
				p2.y = height;
			}
		}

		point1.style.left = p1.x + 'px';
		point1.style.top = p1.y + 'px';
		point2.style.left = p2.x + 'px';
		point2.style.top = p2.y + 'px';
		movePoint.style.left = p1.x + 'px';
		movePoint.style.top = p1.y + 'px';
		
		canvas.clearRect(0, 0, box.clientWidth, box.clientHeight);
		canvas.beginPath();
		canvas.moveTo(p4.x + wsX, p4.y + wsY);
		canvas.lineTo(p3.x + wsX, p3.y + wsY);
		canvas.lineTo(p1.x + wsX, p1.y + wsY);
		canvas.lineTo(p2.x + wsX, p2.y + wsY);
		canvas.lineWidth = 1;
		canvas.strokeStyle = "#090";
		canvas.lineJoin = "miter";
		canvas.stroke();
		canvas.closePath();

		// console.log("width = " + width + ", height = " + height + ", angle = " + angle + ", angle2 = " + angle2);
	}
	function timerFunc() {
		radius += 10;
		if(radius >= maxRadius) {
			radius = 0;
			p4.x = p3.x;
			p4.y = p3.y;
			p3.x = p1.x;
			p3.y = p1.y;
			p1.x = p2.x;
			p1.y = p2.y;
			if(angle < 90) {
				if(angle > angle2) {
					angle = 360 - (90 - (90 - angle));
				} else {
					angle = (90 - angle) + 90;
				}
			} else if(angle < 180) {
				if(angle > angle2) {
					angle = 90 - (90 - (180 - angle));
				} else {
					angle = 90 - (angle - 90) + 180;
				}
			} else if(angle < 270) {
				if(angle > angle2) {
					angle = 180 - (90 - (270 - angle));
				} else {
					angle = 270 + (90 - (angle - 180));
				}
			} else {
				if(angle > angle2) {
					angle = 270 - (90 - (360 - angle));
				} else {
					angle = 90 - (angle - 270);
				}
			}
			calcRadius();
			point3.style.left = p3.x + 'px';
			point3.style.top = p3.y + 'px';
			point4.style.left = p4.x + 'px';
			point4.style.top = p4.y + 'px';
		} else {
			const x = p1.x + radius * Math.cos(angle * Math.PI / 180);
			const y = p1.y - radius * Math.sin(angle * Math.PI / 180);
			movePoint.style.left = x + 'px';
			movePoint.style.top = y + 'px';
		}
	}
	</script>
</body>
</html>

